import React from 'react'
import {Modal, Form, Row, Col, Input} from 'antd';
import {connect} from 'dva';

const FormItem = Form.Item;
const {TextArea} = Input;

@connect(state => ({
  project: state.project,
}))
@Form.create()
export default class StatusDescModal extends React.PureComponent {

  handleOk = (e) => {
    e.preventDefault();
    const {dispatch, id, status, form: {validateFieldsAndScroll}} = this.props;

    validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return;
      }

      dispatch({
        type: 'project/saveStatus',
        payload: {
          id,
          status,
          status_desc: values.status_desc,
        },
      });
    });
  };

  handleCancel = () => {
    this.props.dispatch({
      type: 'project/hideStatusDescModal',
    });
  };

  render() {
    const {project: {statusDescModalVisable}, form: {getFieldDecorator}} = this.props;

    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 20},
      },
    };

    return (
      <Modal
        title={`状态说明`}
        visible={statusDescModalVisable}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        width={600}
        destroyOnClose
      >
        <Form>
          <Row gutter={16}>
            <Col span={24}>
              <FormItem
                {...formItemLayout}
                hasFeedback
                label="状态说明"
              >
                {getFieldDecorator('status_desc', {
                  // initialValue: status_desc,
                  rules: [{
                    required: true,
                    message: `请输入状态说明！`,
                  }],
                })(
                  <TextArea
                    rows={4}
                    placeholder='请输入状态说明'
                  />
                )}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}
